﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="vote.aspx.cs" Inherits="vote" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="css/vote_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="top"></div>
    <div id="main">
	<div id="main_top">
    	杭州科技职业技术学院”网页设计“技能大赛
    </div>
    <div id="main_button">
    	<div id="main_1">
    		<div id="main_1_1" ></div>
        	<div id="main_1_2">
                <font face="Wingdings" color="#666666">v</font><a href="index.aspx" style="text-decoration:none;">查看结果</a>
                <font face="Wingdings" color="#666666">v</font><a href="vote.aspx" style="text-decoration:none;">我要投票</a>
                <font face="Wingdings" color="#666666">v</font><a href="login.aspx" style="text-decoration:none;">管理员登录</a>
			</div>
    		</div>
    	<div id="main_2"></div>

        <div id="content">
		  <div style="margin-left:60px;">
		    
        	<table width="600" border="1" cellspacing="0" cellpadding="0" style="border: #FFF solid 1px" >
              
              <tr>
                <td width="100%" colspan="2" align="center"><img src="pic/gb.gif" alt="" />&nbsp;我要投票&nbsp;<img src="pic/gb.gif" alt="" /></td> 
              </tr>
              <tr>
                <td width="100%" colspan="2">请如实填写所有相关信息：</td> 
              </tr>
              <tr>
                <td align="center" width="25%">您的大名：</td>
                <td><input type="text" name="pname"/></td>
              </tr>
              <tr>
                <td align="center" width="25%">您的学号：</td>
                <td><input type="text" name="pno"/></td>
              </tr>
              <tr>
                <td align="center" width="25%">您的年龄：</td>
                <td><input type="text" name="page"/></td>
              </tr>
              <tr>
                <td align="center" width="25%">您的性别：</td>
                <td>
                
                
                <input type="radio" name="sex" value="男" />男&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" name="sex" value="女"/>女
                
                
                <%--<asp:RadioButtonList ID="RadioButtonList1" runat="server">
                    <asp:ListItem Value="1">男</asp:ListItem>
                    <asp:ListItem Value="0">女</asp:ListItem>
                </asp:RadioButtonList>--%>
                            
                </td>
              </tr>
              <tr>
                <td align="center" width="25%">所在院系：</td>
                <td><input type="text" name="pdep"/></td>
              </tr>
              <tr>
                <td align="center" width="25%">所在班级：</td>
                <td><input type="text" name="pclass"/></td>
              </tr>
              <tr>
                <td align="center" width="25%">身份证号：</td>
                <td><input type="text" name="pdno"/></td>
              </tr>
              <tr>
                <td align="center" width="25%">电子信箱：</td>
                <td><input type="text" name="pemail"/></td>
              </tr>
              <tr>
                <td align="center" width="25%">投票对象：</td>
                <td>
                
                
                <select name="webid" id="webList">
                <option value="1">a</option>
                </select>
                
                
                
                    <%--<asp:DropDownList ID="DropDownList1" runat="server" DataSourceID="AccessDataSource1" DataTextField="webname" DataValueField="id">
                    </asp:DropDownList><asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/database/vote.mdb"
                        SelectCommand="SELECT [webname], [id] FROM [web]"></asp:AccessDataSource>--%>
                
                </td>
              </tr>
              <tr>
                <td align="center" width="25%">投票原因：</td>
                <td><textarea rows="4" name="preason" cols="50"></textarea></td>
              </tr>
            </table>
		  </div>
			<input id="btnSubmit" type="button" value="开始投票"  style="width:150px; height:30px; margin-left:230px; margin-top:30px"/>
        </div>
       	<div id="main_3">
        	<div id="main_3_1"> 
            </div>
            <div id="main_3_2">
            	<hr color="#565656" />
            </div>
        </div>
        <div id="main_4">Copyright 2015 在线投票 jj.948500953.Timu</div>
  	</div>
</div>
<div id="foot"></div>

    </div>
    <script src="https://cdn.bootcss.com/babel-standalone/6.23.1/babel.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        // 表单提交数据
        document.querySelector("#btnSubmit").onclick = function (){
        
            var formData = new FormData();
            formData.append('pname',form1.pname.value);
            formData.append('pno',form1.pno.value);
            formData.append('page',form1.page.value);
            formData.append('sex',form1.sex.value);
            formData.append('pdep',form1.pdep.value);
            formData.append('pclass',form1.pclass.value);
            formData.append('pdno',form1.pdno.value);
            formData.append('pemail',form1.pemail.value);
            formData.append('webid',form1.webid.value);
            formData.append('preason',form1.preason.value);
            
            
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange  = function (){
                if ( xhr.readyState == 4 && xhr.status == 200 ) {
                    console.log( xhr.response );
                    if( xhr.response === "1") {
                        alert("Done!");
                         window.location.href = "vote.aspx";
                        resetForm();
                    } else {
                        alert("请正确填写表单");
                    }
                } else {
                    console.warn(xhr.statusText);
                }
            }

            xhr.open('POST', 'api/vote.ashx');
            xhr.send(formData);
            // console.log(formData);
                
        }
        // 显示可选网站
        window.onload = function (){

            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange  = function (){
                if ( xhr.readyState == 4 && xhr.status == 200 ) {
                    console.log( xhr.response );
                    renderData(JSON.parse(xhr.response))
                    
                } else {
                    console.warn(xhr.statusText);
                }
            }

            xhr.open('POST', 'api/getList.ashx');
            xhr.send();
            // console.log(formData);
        }
        
        function renderData(source){
            var str = "";
            source.data.forEach(function (item, index){
                str+="<option value=\""+item.id+"\">"+item.webname+"</option>"
            })
            document.querySelector("#webList").innerHTML = str;
        }
        
        function resetForm(){
            form1.reset();
        }
    </script>
    </form>
</body>
</html>
